<template>
  <view :style="colorStyle">
    <view class="infobox1">
      <view
        class="list"
        v-for="(item, index, key) in list"
        :key="key"
        @click.stop="gourl(`/pages/refund/detail?id=${item.id}`)"
      >
        <view class="block1 flex aitems between">
          <view
            class="left flex aitems"
            @click.stop="gourl(`/pages/seller/info?id=${item.sellerId}`)"
          >
            <image
              class="icon1"
              :src="item.sellerLogo"
              mode="aspectFill"
            ></image>
            <view class="name c1F1F1F f32 fontWeight">
              {{ item.sellerName }}
            </view>
            <image class="icon2" src="@/static/img15.png" mode=""></image>
          </view>
          <view class="right themeColor f24" v-if="item.refundStatus == 0">
            退款申请中
          </view>
          <view class="right themeColor f24" v-if="item.refundStatus == 1">
            商家同意
          </view>
          <view class="right themeColor f24" v-if="item.refundStatus == 2">
            用户退回
          </view>
          <view class="right themeColor f24" v-if="item.refundStatus == 3">
            退款成功
          </view>
          <view class="right cF65B49 f24" v-if="item.refundStatus == -1">
            商家拒绝
          </view>
          <view class="right c858585 f24" v-if="item.refundStatus == -2">
            取消售后
          </view>
        </view>
        <view class="block2">
          <view class="info1">
            <image :src="item.goods.img" mode="aspectFill"></image>
          </view>
        </view>
        <view class="block3 c1F1F1F f28">
          共{{ item.goods.goodsNum }}件 退款现金：<text class="f24 fontWeight"
            >￥{{ item.refundMoney }}+{{ item.returnDeductIntegral }}积分</text
          >
        </view>
        <view
          class="block5 cF65B49 f28 fontWeight"
          v-if="item.refundStatus == 3"
        >
          退款成功：￥{{ item.refundMoney }}现金+{{
            item.returnDeductIntegral
          }}积分
        </view>
        <view class="block4 flex aitems between">
          <view class="info1 c525252 f24" v-if="item.refundStatus == -2">
            售后已取消
          </view>
          <view class="info1 c525252 f24" v-if="item.refundStatus == -1">
            商家拒绝售后申请
          </view>
          <view class="info1 c525252 f24" v-if="item.refundStatus == 0">
            售后申请已提交，等待商家审核
          </view>
          <view class="info1 c525252 f24" v-if="item.refundStatus == 1">
            商家已同意退款，请注意查收您的账户
          </view>
          <view class="info1 c525252 f24" v-if="item.refundStatus == 2">
            买家已退货，等待商家确认收货
          </view>
          <view class="info1 c525252 f24" v-if="item.refundStatus == 3">
            退款成功，请注意查收您的账户
          </view>
          <view class="info2 themeColor f28"> 查看详情 </view>
        </view>
      </view>
    </view>
    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { orderRefundPage } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getToken, getStorage, removeStorage } from "../../utils/storage";
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  data() {
    return {
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
    };
  },
  async onLoad(options) {
    if (getToken()) {
      this.orderRefundPage();
    }
  },
  async onShow() {
    if (getToken()) {
      if (getStorage("refundRef")) {
        removeStorage("refundRef");
        this.current = 1;
        this.orderRefundPage();
      }
    }
  },
  methods: {
    async orderRefundPage() {
      loading();
      let { data } = await orderRefundPage({
        current: this.current,
        size: 10,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    gourl(url) {
      go(url);
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.orderRefundPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.orderRefundPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  margin: 30rpx 30rpx 0;

  .list {
    background: #fff;
    border-radius: 30rpx;
    margin: 0 0 30rpx 0;
    padding: 30rpx 24rpx;

    .block1 {
      .left {
        .icon1 {
          width: 40rpx;
          height: 40rpx;
        }

        .name {
          margin: 0 12rpx 0 6rpx;
        }

        .icon2 {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .right {
      }
    }

    .block2 {
      margin: 30rpx 0 0;
      white-space: nowrap;
      overflow-x: scroll;

      .info1 {
        margin: 0 30rpx 0 0;
        display: inline-block;

        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 28rpx;
        }
      }
    }

    .block3 {
      margin: 32rpx 0 0;

      text {
      }
    }

    .block4 {
      margin: 32rpx 0 0;

      .info1 {
      }

      .info2 {
        border-radius: 40rpx;
        background: var(--view-op-ten);
        padding: 21rpx 34rpx;
        text-align: center;
      }
    }

    .block5 {
      border-radius: 24rpx;
      background: #ffedeb;
      // height: 88rpx;
      padding: 30rpx;
      margin: 32rpx 0 0;
    }
  }
}
</style>
